<template>
	<div style="margin-top: 55px; padding-bottom: 60px;">
		<el-form label-width="80px">
			<el-form-item label="商品名称">
				<el-input placeholder="请输入商品名称,不能超过60个字" style="width: 600px;" v-model="addGoods.title"></el-input>
			</el-form-item>
			<el-form-item label="商品封面">
				<el-button icon="el-icon-plus"></el-button>
			</el-form-item>
			<el-form-item label="商品分类">
				<el-select placeholder="请选择商品分类" v-model="addGoods.category_id">
					<el-option :label="item.name" v-for="(item,index) in cates" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品描述">
				<el-input type="textarea" v-model="addGoods.desc" placeholder="选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过" style="width: 600px;">
				</el-input>
			</el-form-item>
			<el-form-item label="商品单位">
				<el-input style="width: 600px;" placeholder="请输入商品单位" v-model="addGoods.unit"></el-input>
			</el-form-item>

			<el-form-item label="总库存">
				<el-input style="width: 300px;" type="number" v-model="addGoods.stock">
					<el-button slot="append">件</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="库存预警">
				<el-input style="width: 300px;" type="number" v-model="addGoods.min_stock">
					<el-button slot="append">件</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="最低销售价" :label-width="'90px'">
				<el-input style="width: 300px;" type="number" v-model="addGoods.min_price">
					<el-button slot="append">元</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="最低原价">
				<el-input style="width: 300px;" type="number" v-model="addGoods.min_oprice">
					<el-button slot="append">元</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="库存显示">
				<el-radio-group size="mini" v-model="addGoods.stock_display">
					<el-radio :label="1"  border>是</el-radio>
					<el-radio :label="0"  border>否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否上架">
				<el-radio-group size="mini" v-model="addGoods.status">
					<el-radio :label="1"  border>放入仓库</el-radio>
					<el-radio :label="0"  border>立即上架</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="运费模板" >
				<el-select placeholder="请选择运费模板" v-model="addGoods.express_id">
					<el-option :label="item.name" :value="item.id" v-for="(item,index) in express"></el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<div class="create">
			<el-form>
				<el-form-item>
					<el-button type="success" @click="submit">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="back">
			<el-form>
				<el-form-item>
					<el-button size="mini" @click="$router.go(-1)">返回商品列表</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 图片模态框
				set_img:false,
				// 商品添加参数
				addGoods:{
					category_id: "",
					cover: "",
					desc: "",
					express_id: "",
					ischeck: 0,
					min_oprice: "",
					min_price: "",
					min_stock: "",
					status: 0,
					stock: "",
					stock_display: 0,
					title: "",
					unit: "",
				},
				// 分类
				cates:[],
				// 运费模板
				express:[],
			}
		},
		mounted() {
			this.getGoods();
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			getGoods(){
				this.$axios.get('/api/goods/create').then(res=>{
					console.log(res)
					this.cates=res.data.cates;
					this.express=res.data.express.list;
					this.$message.success("商品发布成功")
				}).catch(error=>{
					console.log(error.response.data.msg)
				})
			},
			submit(){
				this.$axios.post('/api/goods',this.addGoods).then(res=>{
					console.log(res)
					this.getGoods();
				})
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style scoped>
	.create {
		position: fixed;
		bottom: 60px;
		right: 60px;
	}

	.back {
		position: absolute;
		top: 68px;
		left: 420px;
		z-index: 200;
	}
</style>
